<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap-theme.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		.content{
			width: 60%;
			margin: middle;
		}
		ul.none {list-style-type: none}
		.photo{
			margin-right: 30px;
			margin-left: 30px;
			width: 40%;
			float: left;
		}
		.text-1{
			float: right;
		}
		.biaoti{
			width: 40%;
			height: 30px;
			float: left;
		}
		.name{
			float: left;
			width: 20%;
		}
		body{
			background-repeat: no-repeat; 
			background-attachment: fixed;
		}
		.back{
			 background-color: rgba(143, 130, 130, 0.28);
			 color: white;
		}
		img{
			width: 440px;
			height: 786px;
		}
		p{
			color: rgb(200,200,200);
		}
		h3{
			color: white;
		}
		h1{
			color: rgb(200,200,200);
		}
		address{
			color: white;
			text-align: center;
		}
		</style>
	</head>
	<body background="F:\myblog\beijing.jpg">
		<nav class="navbar navbar navbar-inverse" role="navigation">
  
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		      <span class="sr-only">Toggle navigation</span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		    </button>
		    <a class="navbar-brand" href="F:/myblog/home.html">HOME</a>
		    <a class="navbar-brand" href="F:/myblog/content.html">CONTENTS</a>
		    <a class="navbar-brand" href="#">MESSAGE</a>
		  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <!--<button type="submit" class="btn btn-right">Submit</button>-->
      <button type="button" class="btn btn-primary">Submit</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>
<div class="jumbotron back">
  <h1>The drift bottle</h1>
  <p>Welcome to my blog</p>
</div>
<div class="container">
	<div class="name">
		<h3>
			Instruction
		</h3>
		<p>my name is Sally</p>
		<p>age</p>
		<p>home</p>
	</div>
	<div class="photo">
		<h3>My photo</h3>		
		<p>
			<img src="F:\myblog\photo2.jpg">
		</p>
	</div>
	<div class="col-md-4 text-1">
		<h3>The latest article</h3>
			<ul class="none">
				<li><a href="#">first article</a></li>
				<li><a href="#">second article</a></li>
			</ul>
	</div>
</div>
<hr>
<address>xidian university</address>
	</body>
</html>